
{include file="admin/header" title="新增店铺" /}
<div id="app">
    <form class="layui-form">

        <div class="layui-form-item">
            <label class="layui-form-label label-width">店铺名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="name" lay-verify="required" autocomplete="off" lay-affix="clear"
                       class="layui-input input-width" placeholder="请输入店铺名称">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label label-width">店铺域名</label>
            <div class="layui-input-block">
                <input type="text" name="host" lay-verify="required" placeholder="请输入店铺域名" autocomplete="off"
                       class="layui-input input-width">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label label-width">推广域名</label>
            <div class="layui-input-block">
                <input type="text" name="website" lay-verify="required" placeholder="请输入推广域名" autocomplete="off"
                       class="layui-input input-width">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label label-width">API Key</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="api_key" lay-verify="required" autocomplete="off" lay-affix="clear"
                       class="layui-input input-width" placeholder="请输入API Key">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label label-width">API秘钥</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="api_secret" lay-verify="required" autocomplete="off" lay-affix="clear"
                       class="layui-input input-width" placeholder="请输入API秘钥">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label label-width">Admin Token</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="admin_token" lay-verify="required" autocomplete="off" lay-affix="clear"
                       class="layui-input input-width" placeholder="请输入Admin Token">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label label-width">Store Token</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="store_token" lay-verify="required" autocomplete="off" lay-affix="clear"
                       class="layui-input input-width" placeholder="请输入Store Token">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label label-width">是否加购</label>
            <div class="layui-input-block">
                <input type="checkbox" name="is_repurchase" lay-skin="switch" lay-filter="switchRepurchase" title="ON|OFF">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center;">支付信息</div>
                <div class="layui-card-body" id="payment-body">

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-sm"  id="add-payment" type="button"><i class="layui-icon layui-icon-addition">新增</i></button>
                        </div>
                    </div>

<!--                    支付方式1-->
                    <div class="layui-fluid">
                        <div class="layui-row" style="justify-content:flex-start;display: flex;width:100%">
                            <div class="layui-col-md10">
                              <div class="layui-row">
                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label label-width">支付方式</label>
                                          <div class="layui-input-block">
                                              <select name="payments[0][pay_method]">
                                                <option value="1">Paypal</option>
                                                <option value="2">Asiabill</option>
                                                <option value="3">Payoneer</option>
                                                <option value="4">Airwallex</option>
                                                <option value="5">Stripe</option>
                                              </select>
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md4 ">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">模式</label>
                                          <div class="layui-input-block">
                                              <input type="checkbox" name="payments[0][mode]" lay-skin="switch"  title="LIVE|TEST">
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md2 ">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">状态</label>
                                          <div class="layui-input-block">
                                              <input type="checkbox" name="payments[0][status]" lay-skin="switch"  title="ON|OFF">
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md2">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label label-width">申请状态</label>
                                          <div class="layui-input-block">
                                              <input type="checkbox" name="payments[0][apply_status]" lay-skin="switch"  title="ON|OFF">
                                          </div>
                                      </div>
                                  </div>

                              </div>
                              <div class="layui-row">
                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">商户号</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="payments[0][merchant_no]"  autocomplete="off" lay-affix="clear"
                                                     class="layui-input" placeholder="请输入Store Token">
                                          </div>
                                      </div>
                                  </div>
                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label label-width">Client ID</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="payments[0][client_id]" lay-verify="required" autocomplete="off" lay-affix="clear"
                                                     class="layui-input " placeholder="请输入Store Token">
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">Secret</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="payments[0][secrect]" lay-verify="required" autocomplete="off" lay-affix="clear"
                                                     class="layui-input " placeholder="请输入Store Token">
                                          </div>
                                      </div>
                                  </div>

                              </div>

                            </div>

                            <div class="layui-col-md2" style="justify-content: center;display: flex;flex-direction: column;">
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                <button class="layui-btn layui-btn-danger layui-btn-sm del-payment-btn" style="align-items: center;" type="button" onclick="delPayment(this)">删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即创建</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script>

    layui.use(['form','jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        // 自定义验证规则
        form.verify({
            pass: function (value) {
                if (!/(.+){6,12}$/.test(value)) {
                    return '密码必须 6 到 12 位';
                }
            }
        });

        // 提交事件
        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            $.ajax({
                url:"{:url('/admin/shop/add')}",
                type: 'POST',
                dataType: 'json',
                data: field,
                success:function (data){
                    if(data.code == 200){
                        layer.msg(
                            '添加店铺成功',
                            {icon: 1,},function (){
                                let parentIndex = sessionStorage.getItem('shop_list_index')
                                parent.layer.close(parentIndex)
                            });
                    }else{
                        layer.msg(data.msg, {
                            icon: 2,
                            skin: 'layer-ext-moon',
                        });
                    }
                },
                error:function (xhr, status, error){

                }
            })


            return false; // 阻止默认 form 跳转
        });

       $('#add-payment').click(function (){
           let len = $('.layui-fluid').length
           var paymentHtml = `
            <div class="layui-fluid">
                        <div class="layui-row" style="justify-content:flex-start;display: flex;width:100%">
                            <div class="layui-col-md10">
                              <div class="layui-row">
                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label label-width">支付方式</label>
                                          <div class="layui-input-block">
                                              <select name="payments[${len}][pay_method]">
                                                <option value="1">Paypal</option>
                                                <option value="2">Asiabill</option>
                                                <option value="3">Payoneer</option>
                                                <option value="4">Airwallex</option>
                                                <option value="5">Stripe</option>
                                              </select>
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md4 ">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">模式</label>
                                          <div class="layui-input-block">
                                              <input type="checkbox" name="payments[${len}][mode]" lay-skin="switch"  title="LIVE|TEST">
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md2 ">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">状态</label>
                                          <div class="layui-input-block">
                                              <input type="checkbox" name="payments[${len}][status]" lay-skin="switch"  title="ON|OFF">
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md2">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label label-width">申请状态</label>
                                          <div class="layui-input-block">
                                              <input type="checkbox" name="payments[${len}][apply_status]" lay-skin="switch"  title="ON|OFF">
                                          </div>
                                      </div>
                                  </div>

                              </div>
                              <div class="layui-row">
                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">商户号</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="payments[${len}][merchant_no]" lay-verify="required" autocomplete="off" lay-affix="clear"
                                                     class="layui-input" placeholder="请输入Store Token">
                                          </div>
                                      </div>
                                  </div>
                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label label-width">Client ID</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="payments[${len}][client_id]" lay-verify="required" autocomplete="off" lay-affix="clear"
                                                     class="layui-input " placeholder="请输入Store Token">
                                          </div>
                                      </div>
                                  </div>

                                  <div class="layui-col-md4">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">Secret</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="payments[${len}][secrect]" lay-verify="required" autocomplete="off" lay-affix="clear"
                                                     class="layui-input " placeholder="请输入Store Token">
                                          </div>
                                      </div>
                                  </div>

                              </div>

                            </div>

                            <div class="layui-col-md2" style="justify-content: center;display: flex;flex-direction: column;">
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                <button class="layui-btn layui-btn-danger layui-btn-sm del-payment-btn" style="align-items: center;" type="button" onclick="delPayment(this)">删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
           `;

           $('#payment-body').append(paymentHtml);
           form.render()
       });

    });


    function delPayment(t){
        $(t).parent().parent().parent().parent().parent().remove();
    }


</script>

{include file="admin/footer" /}